<template>
<div>
  <!--显示任务详情dailog-->
  <el-dialog :title="subTaskForm.title" :visible.sync="taskDetailVisible">
    <taskDetail :task="subTaskForm"></taskDetail>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary">结束任务</el-button>
    </div>
  </el-dialog>
	<el-calendar v-model="value" id="calendar">
		<template
     slot="dateCell"
     slot-scope="{date, data}">
     <!--自定义内容-->
      <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
      <div v-for="item in calendarData">
        <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
          <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
            <el-tooltip class="item" effect="dark" :content="item.desc" placement="right">
              <div :class="item.status" class="is-selected" @click="doSubTask(item.index)">
              	<i class="fa fa-file-text-o" style="margin-right: 5px;"></i>{{item.title}}</div>
            </el-tooltip>
        	</div>
        </div>
      </div>
    </template>
	</el-calendar>
</div>
</template>
<script>
import {getAPItoken} from '@/utils/api'
import taskDetail from '@/views/Project/taskDetail'
export default {
  components: {
    taskDetail
  },
  data() {
    return {
      taskDetailVisible: false,
    	calendarData: [],
      value: new Date(),
      subtasks: [],
      subTaskForm: {},
    }
  },
  methods: {
    FormatTime(time,fmt){
      var o = {
        "M+": time.getMonth() + 1, //月份 
        "d+": time.getDate(), //日 
        "H+": time.getHours(), //小时 
        "m+": time.getMinutes(), //分 
        "s+": time.getSeconds(), //秒 
        "q+": Math.floor((time.getMonth() + 3) / 3), //季度 
        "S": time.getMilliseconds() //毫秒 
      }
      if (/(y+)/.test(fmt))
        console.log(time.getFullYear())
        fmt = fmt.replace(RegExp.$1, (time.getFullYear() + "").substr(4 - RegExp.$1.length))
      for (var k in o)
      if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)))
      return fmt
    },
    formatTime (date_string,fmt) {
      if(typeof(date_string) == 'string'){
        var s1 = date_string.replace(/-/g,"/")
        var s2 = s1.replace(/T/g," ")
        var date = new Date(s2)
        return this.FormatTime(date, fmt)
      }
      return this.FormatTime(date_string, fmt)
    },
    getSubTasks () {
      const promise = getAPItoken(API.subTask,this.$store.state.user.token)
      promise.then((subtasks)=>{
        this.subtasks = subtasks
        subtasks.forEach((subtask,i)=>{
          var cal_data_obj = {'months':[],'days':[],'things':''}
          cal_data_obj.months.push(this.formatTime(subtask.begin_date,'MM'))
          cal_data_obj.days.push(this.formatTime(subtask.begin_date,'dd'))
          cal_data_obj.title = subtask.title
          cal_data_obj.desc = subtask.desc
          cal_data_obj.index = i
          cal_data_obj.status = subtask.status
          this.calendarData.push(cal_data_obj)
        })
      })
    },
    doSubTask (index) {
      this.taskDetailVisible = true
      this.subTaskForm = this.subtasks[index]
    }
  },
  mounted () {
    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
      prevBtn.addEventListener('click', () => {
        console.log(this.value);
      })
    })

    this.$nextTick(() => {
      // 点击后一个月
      let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:last-child');
      prevBtn.addEventListener('click', () => {
        console.log(this.value);
      })
    })

    this.getSubTasks()
  }
}
</script>

<style scoped>
.el-calendar-day {
	overflow-y: auto;
}

.calendar-day{
  text-align: center;
  line-height: 30px;
  font-size: 12px;

}
.wait{
  background: #E2ECFD;
  color: #fa5a55;
}

.run{
  background: #E2ECFD;
  color: #ffa415;
}

.finish{
  background: #E2ECFD;
  color: #23d8bb;
}
.is-selected {
  font-size: 10px;
  margin-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

</style>